﻿@page "/chart/numeric-axis"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the rendering of numeric axis in the chart with England and West Indies cricket match data.</p>
</SampleDescription>
<ActionDescription>
    <p>You can use numeric axis to represent numeric value oriented data in the chart. To render numeric axis, set <code>ValueType</code> in axis to <code>Double</code>.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the numeric axis can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/numeric-axis/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="England vs West Indies" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis Title="Death Overs" Minimum="15" Maximum="21" Interval="1">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis>
            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Format="${point.x}th Over : <b>${point.y} Runs</b>"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="Over" YName="ENG_Score" Opacity="1" Name="England" Fill="#1e90ff" Width="2" Type="ChartSeriesType.Column">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" XName="Over" YName="WI_Score" Opacity="1" Name="West Indies" Fill="#b22222" Width="2" Type="ChartSeriesType.Column">
                <ChartMarker>
                    <ChartDataLabel Visible="true" Position="LabelPosition.Top">
                        <ChartDataLabelFont FontWeight="600"></ChartDataLabelFont>
                    </ChartDataLabel>
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartLegendSettings Visible="true"></ChartLegendSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<DoubleData> ChartPoints { get; set; } = new List<DoubleData>
    {
        new DoubleData { Over = 16, ENG_Score = 2, WI_Score = 7},
        new DoubleData { Over = 17, ENG_Score = 14, WI_Score = 7 },
        new DoubleData { Over = 18, ENG_Score = 7, WI_Score = 11 },
        new DoubleData { Over = 19, ENG_Score = 7, WI_Score = 8 },
        new DoubleData { Over = 20, ENG_Score = 10, WI_Score = 24 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class DoubleData
    {
        public double Over { get; set; }
        public double ENG_Score { get; set; }
        public double WI_Score { get; set; }
    }
}
